/* Basic reset and font styles */
    :root {
      font-size: 100%;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      padding: 0;
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      /* ----To save my retinas LOL --- remove before launching*/
      background-color: #ffffff;
    }
    
    /* --- Keyframes for the gradient animation --- */
    @keyframes animateGradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
    }
    
    /* --- New animation for text hover effect --- */
    @keyframes animateTextGradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* --- Navbar Container --- */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 3rem; /* Adjusted padding for better spacing */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #e100ff 0%, #25e3fc 50%, #7802ff 100%);
        background-size: 400% 400%;
        animation: animateGradient 60s ease infinite;
        border-radius: 0 0 0 0;
    }

    /* The logo-container is now the main component */
    .logo-container {
      display: flex;
      flex-direction: column;
      width: 7.5rem; /* Reduced width to half */
      max-width: 100%; 
      aspect-ratio: 1 / 1.1;
    }

    /* Logo icon styling */
    .logo-container .logo {
      flex-grow: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .logo-image {
      max-width: 100%;
      height: auto;
    }
    
    /* Company name styling */
    .logo-container .company-name {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /*removes lines under links*/
    a{
        text-decoration: none;
    }

    .welstand-name {
      margin: 0;
      color: #3659D8; /* Original text color */
      font-family: 'Montserrat', sans-serif;
      font-size: 1.5rem; /* Reduced font size to half */
      font-weight: 900;
      letter-spacing: 0.2em;
    }
    
    /* Animation on hover */
    .welstand-name:hover {
     /* Apply the radial gradient as a background */
      background: radial-gradient(circle at center, #e100ff 0%, #25e3fc 50%, #7802ff 100%);
      background-size: 400% 400%;
      /* Clip the background to the text and make the text color transparent */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: animateTextGradient 8s ease infinite;
    }
    
    /* Slogan styling */
    .logo-container .slogan {
      flex-grow: 0.5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    .slogan-text {
      margin: 0;
      padding: 2px;
      color: #1EC3FF;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.5rem; /* Reduced font size to half */
      font-weight: 900;
      letter-spacing: 0.1em;
      text-align: center;
      white-space: nowrap;
      /*border:1px solid #f4f4f4;*/
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(2px);
    }

    /* --- Links Section --- */
    .navbar-links ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0.75rem; /* Reduced gap to half */
    }
    
    .navbar-links a {
      color: white;
      text-decoration: none;
      font-size: 1.4rem; /* Reduced font size to half */
      font-weight: bold;
      padding: 0.25rem 0.5rem; /* Reduced padding to half */
      border-radius: 6px;
      
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .navbar-links a:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
    }
    
    /* --- Media Queries for Responsiveness --- */
    @media (max-width: 768px) {
      .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 1rem; /* Adjusted padding for mobile */
      }
    
      .navbar-links ul {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
      }
    
      .navbar-links a {
        display: block;
        text-align: center;
        padding: 0.375rem;
      }
    }